<template>
	<!-- 人才服务详情 -->
	<div class="serveSign">
		<swiperService></swiperService>
		<div class="serveDetail-box">
			<div class="box">
				<div class="serveDetail-nav flexItems">
					<router-link to="/serve">{{$t('common.personService.rencai')}}</router-link>
					<span>></span>
					<router-link to="/serve_main?type=2">{{$t('common.personService.teacher')}}</router-link>
					<span>></span>
					<span>{{$t('common.detail.details')}}</span>
				</div>
				<div class="serveDetail-content">
					<div class="serveDetail-title">
						<p class="flexCenter">{{info.courseName}}<span class="loading">{{info.courseStatusTxt}}</span></p>
						<p class="h99 font14">
							<span v-if="info.instructorResource">讲师：{{info.instructorResource.userName}}</span>
							<span>{{$t('common.personService.time1')}}：{{info.createTime}}</span>
						</p>
					</div>
					<div class="serveDetail-text">
						<div class="serveSign-box">
							<p class="h66 font14">{{$t('common.personService.time2')}}：{{info.beginTime}}-{{info.endTime}}</p>
							<p class="h66 font14">{{$t('common.personService.time3')}}：{{info.applyBeginTime}}-{{info.applyEndTime}} <span class="h99 font12">{{$t('news.baomTip')}}</span></p>
							
							
						</div>
						<!-- ■ applyStatus:"1" + applyOnline:"1"  的i情况下  可以报名 -->

						<div class="serveSign-box" v-if="info.applyOnline == 1 && info.applyStatus == 1">
							<div class="h2 flex-lect personal-title">
								<b class="flex1 font20">{{$t('common.personService.signup')}}</b> 
							</div>
							<table>
								<tr v-for="(item, index) in info.requirementList" :key="index">
									<td>{{item.infoName}}</td>
									<td><el-input v-model="item.value" :placeholder="item.statement" @input="change($event)" maxlength="30"></el-input></td>
								</tr>
								<tr>
									<td></td>
									<td><el-button class="submitBtn" @click="submitForm(info.requirementList)">{{$t('common.personService.submitSign')}}</el-button></td>
								</tr>
							</table>
						</div>
						<div class="serveSign-box">
							<div class="h2 flex-lect personal-title">
								<b class="flex1 font20">{{$t('common.personService.lessContent')}}</b> 
							</div>
							<p class="h66 font14" v-html="info.content"></p>
						</div>
					</div>
				</div>
			</div>
		</div>
		
	</div>
</template>
<script>
import {ajax,showToast,isLoginM} from '@/utils/js.js'
import {talentApply,trainingDetails} from '@/services/api.js'
import swiperService from '@/components/personService.vue' //人才服务轮播图
export default{
	components:{
	  swiperService
	},
	data(){
	  return{
		imgUrl:this.$store.state.imgUrl,	//图片前缀
		  
		name:'',
		phone:'',
		company:'',
		
		lessId:'', //开课id
		info:[],
		
		time: false, // 根据时间判断能不能报名
	  }
	},
	methods:{
		change(e){
      this.$forceUpdate()
    },
		submitForm(e){
			isLoginM(this,()=>{
				let requirementApplyList = []
				for(let i = 0; i<e.length; i++){
					let newJson = {requirementId:e[i].id,value:e[i].value}
					console.log(newJson)
					requirementApplyList = requirementApplyList.concat(newJson)
				}
				let data = {
					trainingCourseId: this.info.id,
					requirementApplyList: requirementApplyList
				}
				
				
				ajax(this,talentApply,data,res=>{
					showToast(this,res.msg,1)
				},err=>{
					console.log(err)
				});
			})
			
		},
		
		// 详情
		getDetail(){
			ajax(this,trainingDetails,{id:this.$route.query.id},res=>{
				console.log(res.data)
				this.info = res.data;
				
				// 比较时间
				var beginTime = res.data.applyEndTime; 	//开始报名时间
				var endTime = this.CurentTime();	 	//现在的时间
				var beginTimes =beginTime.replace(/[^0-9]/gi,'')
				var endTimes =endTime.replace(/[^0-9]/gi,'')
				console.log(parseInt(endTimes) - parseInt(beginTimes))
				
				// var a =(Date.parse(endTimes)-Date.parse(beginTimes))/3600/1000;
				var  a = parseInt(endTimes) - parseInt(beginTimes)
				if(a<0){
					this.time = false   //不可以报名
				}else if (a>=0){
					this.time = true	//可以报名
				}

			},err=>{console.log(err)})
		},
		
		//获取当前时间
		CurentTime(){
			var date=new Date();
			//年
			var year=date.getFullYear();
			//月
			var month=(date.getMonth()+1)<10?"0"+(date.getMonth()+1):(date.getMonth()+1);
			//日
			var day=date.getDate()<10?"0"+date.getDate():date.getDate();
			//时
			var hh=date.getHours()<10?"0"+date.getHours():date.getHours();
			//分
			var mm=date.getMinutes()<10?"0"+date.getMinutes():date.getMinutes();
			//秒
			var ss=date.getSeconds()<10?"0"+date.getSeconds():date.getSeconds();
			
			var nowTime = year+"-"+month+"-"+day+" "+hh+":"+mm+":"+ss;
			return nowTime;
		},
		
		content(){
			this.getDetail()
		},
	},
	mounted() {
		var id = this.$route.query.id
		console.log(id)
		this.lessId = id
		this.content();
		
		
	},
	watch:{
	  '$i18n.locale'(){
	    this.content()
	  },
	},
}
</script>
<style lang="scss">
.serveSign{
	.banner{
	  img{display: block;}
	  .el-carousel--button{
	    width:12px;
	    height:12px;
	    background:rgba(255,255,255,1);
	    border-radius:50%;
	    opacity: 1;
	  }
	  .el-carousel--indicator.is-active button{
	    background-color: #0F54BC;
	  }
	}
	.banner .link{height: 450px;display: block;width: 100%;background-position: center;background-repeat: no-repeat;background-size: cover;}
	.bannerdot {width: 100%;bottom:10px;left: 0;z-index: 999;}
	.bannerdot .swiper-pagination-bullet{width:12px;height:12px;background-color: #fff;opacity: 1;margin:0 8px;}
	.bannerdot .swiper-pagination-bullet-active{background-color: #0F54BC;}
	.serveDetail-nav{
		padding: 10px 0;
		font-size: 13px;
		a{color: #999;}
		span{color: #999;margin: 0 5px;}
	}
	.serveDetail-content{
		width: 100%;
		background-color: #fff;
		padding: 50px 0;
		.serveDetail-title{
			text-align: center;
			p:nth-of-type(1){
				font-size: 22px;color: #333;margin-bottom: 16px;
				.loading{
					padding: 3px 7px;
					background-color: rgba(15,84,188,0.1);;
					font-size: 12px;
					color: #0F54BC;
					margin-left: 10px;
				}
			}
			p.h99{
				span{margin: 0 16px;}
			}
		}
		.serveDetail-text{
			padding: 0 113px;
			.serveSign-box{
				border-bottom: 1px solid #F2F2F2;
				padding: 30px 0;
				p{
					line-height: 24px;
					margin-bottom: 10px;
				}
				table{
					width: 100%;
					tr{
						td{
							padding: 9px 0;
							.el-input--small .el-input__inner{
								height: 44px;
								width: 540px;
							}
							.submitBtn{
								// width:99px;
								height:36px;
								background:rgba(15,84,188,1);
								color: #fff;
							}
						}
						td:nth-of-type(1){
							width: 70px;
							text-align: right;
							padding-right: 12px;
							font-size: 14px;
						}
					}
				}
			}
			.serveSign-box:nth-last-of-type(1){
				border-bottom: 0;
			}
		}
	}
	.personal-title{
		padding-bottom: 20px;
		b{
		  padding-left: 10px;
		  position: relative;
		}
		b::before{
		  content:"";
		  position: absolute;
		  width: 2px;
		  height: 18px;
		  background-color: #0F54BC;
		  left: 0;
		  top: 50%;
		  transform: translateY(-50%);
		}
	}
}

</style>
